<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>index</title>
		<meta name="description" content="" />
		<meta name="author" content="Gahee Yoon" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

		<!-- 부트스트랩 CSS 파일 연결하기 -->
		<link rel = "stylesheet" type="text/css" href="assets/css/bootstrap.css"/>
		<link rel = "stylesheet" type="text/css" href="assets/css/style.css"/>

		<!-- 부트스트랩 js 파일 연결하기 -->
		<!-- JQuery 파일 연결하기 -->
		<script src="http://ajax.google.comcss/ajax/libs/jquerycss/1.8.3/jquery.min.js"></script>
		<script src="js/bootstrap.js"></script>

		<!-- 익스플로서 핵, 조건부 주석
		인터넷 익스플로러 9이하에서 <header> <aside> <footer> 등 html5 에서 추사된 주석을 인식하지 않기 때문에 새로운 html5요소를 <div>
		요소로 바꿔주는 역할을 함-->

		<!--[if lt IE 9]>
		<script sr="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

	</head>

	<footer>
		<div class="navbar">
			<div class="navbar-inner">
				<a class="brand" href="#">Title</a>
				<ul class="nav">
					<li class="active">
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#">Link</a>
					</li>
					<li>
						<a href="#">Link</a>
					</li>
				</ul>
			</div>
		</div>
		<ul class="breadcrumb">
			<li>
				<a href="#">Home</a><span class="divider">/</span>
			</li>
			<li>
				<a href="#">Library</a><span class="divider">/</span>
			</li>
			<li class="active">
				Data
			</li>
		</ul>
		<p>
			<h1>부트스트랩</h1>
		</p>

		efault <span class="label">Default</span>
		Success <span class="label label-success">Success</span>
		Warning <span class="label label-warning">Warning</span>
		Important <span class="label label-important">Important</span>
		Info <span class="label label-info">Info</span>
		Inverse <span class="label label-inverse">Inverse</span>

		<div class="progress progress-info">
			<div class="bar" style="width: 20%"></div>
		</div>
		<div class="progress progress-success">
			<div class="bar" style="width: 40%"></div>
		</div>
		<div class="progress progress-warning">
			<div class="bar" style="width: 60%"></div>
		</div>
		<div class="progress progress-danger">
			<div class="bar" style="width: 80%"></div>
		</div>

		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
			<li>
				<a tabindex="-1" href="#">Action</a>
			</li>
			<li>
				<a tabindex="-1" href="#">Another action</a>
			</li>
			<li>
				<a tabindex="-1" href="#">Something else here</a>
			</li>
			<li class="divider"></li>
			<li>
				<a tabindex="-1" href="#">Separated link</a>
			</li>
		</ul>
		<div>
			<p>
				<a href="/">home</a>
			</p>
			<p>
				<a href="js/bootstrap.js">js</a>
			</p>
		</div>
		<div class="btn-group">
			<button class="btn">
				Left
			</button>
			<button class="btn">
				Middle
			</button>
			<button class="btn">
				Right
			</button>
		</div>

		<p>
			<button class="btn btn-large btn-primary" type="button">
				Large button
			</button>
			<button class="btn btn-large" type="button">
				Large button
			</button>
		</p>
		<p>
			<button class="btn btn-primary" type="button">
				Default button
			</button>
			<button class="btn" type="button">
				Default button
			</button>
		</p>
		<p>
			<button class="btn btn-small btn-primary" type="button">
				Small button
			</button>
			<button class="btn btn-small" type="button">
				Small button
			</button>
		</p>
		<p>
			<button class="btn btn-mini btn-primary" type="button">
				Mini button
			</button>
			<button class="btn btn-mini" type="button">
				Mini button
			</button>
		</p>
	</footer>
	</body>
</html>
